<template>
  <Page name="确认提现">
  <div class="info">
    <div class="amount"><span class="price">{{form.amount}}</span> {{form.currency_code}}</div>
    <div class="remark mt20">提现金额</div>
  </div>
  <div class="list-item">
    <div class="item fx fx-vc">
      <div class="label flex">资金扣除组合</div>
    </div>
    <div class="item fx fx-vc">
      <div class="label flex">
        <template v-if="!isCustom">
            <span v-for="(item,index) in form.pay_group.list" :key="index">{{index >0 ? '+' : ''}}{{item.amount}} {{item.currency_code}}</span>
        </template>
        <template v-else>
          <span v-for="(item, index) in params.group" :key="index" v-if="item.amount">
            <span v-if="index">+</span>
            {{item.amount}} {{item.currency}}
          </span>
        </template>
      </div>
    </div>
  </div>
  <div class="form-btn">
    <button class="btn btn-primary btn-block" :disabled="posting" @click="submit">立即支付</button>
  </div>

  <Keyboard
    v-if="showKeyboard"
    type="getout"
    title="密码支付"
    label="请输入支付密码"
    :loading="posting"
    :params="params"
    @success="success"
    @close="showKeyboard = false"
    />
</Page>
</template>

<script>
import Page from '~/components/page'
import Keyboard from "~/components/Keyboard"
export default {
  validate({store,redirect}){
    // 如果form为空，表示没有经过上一步操作非法进入页面
    if(!store.state.draw.form){
      redirect('/wealth');
    }
    return true;
  },
  components: {
    Keyboard,
    Page,
  },
  asyncData({store}){
    let isCustom = store.state.draw.isCustom;
    let cache = store.state.draw.form;
    let params = {
      type:cache.type,
      currency_code:cache.currency_code,
      amount:cache.amount,
      bank_id:cache.bank_id
    }
    if(isCustom){
      params.group = cache.group.filter(item=>!!item.amount)
    }
    return {
      form:cache,
      params,
      isCustom
    }
  },
  data: function() {
    return {
      posting: false,
      showKeyboard:false,
      okButton: true
    };
  },
  methods: {
    submit(){
      if(!this.showKeyboard){
        this.showKeyboard = true;
      }
    },
    success(data){
      this.$store.commit('draw/setStatus',data);
      this.$router.push('status');
    },
  }
};
</script>

<style lang="less" scoped>
.info {
  display: flex;
  flex-direction: column;
  justify-content: center;;
  align-items: center;
  width:100%;
  height:240px;
  overflow: hidden;
  padding:0 28px;
  background-color:#fff;
  .amount,.remark {
    max-width: 100%;
    .text-ellipsis();

  }
  .amount {
    font-size:30px;
    color:#292929;
    .price {
      font-size:60px;
    }
  }

}

.form-btn {
  margin:60px 30px;
}
</style>
